<template>
    <div>
        <button @click="jump">query跳转到home</button>
        <button @click="jumpP">param跳转传参到home</button>
    </div>
</template>

<script>
    export default {
        data(){
            return{

            }
        },
        methods:{
            jump(){
                //$router 全局的路由实例
                console.log(this.$router)
                // 路由跳转传参
                // 1.通过query传参，将参数拼接到了url后面，需要通过path去跳转,刷新数据不会丢失
                this.$router.push({
                    path:"/",
                    query:{
                        username:"张三",
                        age:18
                    }
                })
            },
            jumpP(){
                // 2.通过params传参，不会将参数参数拼接到url后面，但是刷新数据就丢失，通过name跳转
                this.$router.push({
                    name:"home",
                    params:{
                        password:"123456",
                        like:"大闸蟹"
                    }
                })
            }
        },
    }
</script>

<style lang="scss" scoped>

</style>